<template>
  <div class="resize" ref="resize"></div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
const props = defineProps({
  asideWidth: {
    type: Number,
  },
  dragIng: {
    type: Boolean,
    default: false,
  },
});
// const emit = defineEmits<{
//   (e: "update:dragIng", val: boolean): void;
//   (e: "update:asideWidth", val: number): void;
// }>();
const emit = defineEmits(["update:asideWidth", "update:dragIng"]);
const resize: any = ref();
const dragResizeState = reactive({
  startDrag() {
    const _self = this;
    resize.value.onmousedown = function () {
      emit("update:dragIng", true);
      document.onmousemove = function (e) {
        let menuWidth = (document.getElementById("leftLayoutEl") as any)
          .clientWidth;
        let asideWidth = e.clientX - menuWidth;
        if (asideWidth < 10) {
          //拖动最小不能小于10
          asideWidth = 10;
        }
        emit("update:asideWidth", asideWidth);
      };
      document.onmouseup = function (evt) {
        emit("update:dragIng", false);
        document.onmousemove = null;
        document.onmouseup = null;
        resize.value.releaseCapture && resize.value.releaseCapture();
      };
      return false;
    };
  },
});
onMounted(() => {
  dragResizeState.startDrag();
});
</script>

<style lang="scss" scoped>
.resize {
  width: 5px;
  height: 100%;
  cursor: w-resize;
  float: left;
  position: absolute;
  right: 0;
  top: 0;
}
</style>